<template>
  <div>
    <ResumePage v-show="active == 0" />
    <JobsPage v-show="active == 1" />
    <SearchPage v-show="active == 2" />
    <NotePage v-show="active == 3" />
    <MyPage v-show="active == 4" />
    <van-tabbar v-model="active" active-color="#07f" @change="onChange">
      <van-tabbar-item>
        <span>简历</span>
        <template #icon="props">
          <img src="@/assets/img/company/nav-icon/resume-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/company/nav-icon/resume-icon.png" v-else />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>岗位</span>
        <template #icon="props">
          <img src="@/assets/img/company/nav-icon/jobs-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/company/nav-icon/jobs-icon.png" v-else />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>搜人才</span>
        <template #icon="props">
          <img src="@/assets/img/company/nav-icon/search-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/company/nav-icon/search-icon.png" v-else />
        </template>
      </van-tabbar-item>

      <van-tabbar-item :badge="im_badge ==0 ? '' : im_badge">
        <span>消息</span>
        <template #icon="props">
          <img src="@/assets/img/company/nav-icon/note-icon-hover.png" v-if="props.active" />
          <img src="@/assets/img/company/nav-icon/note-icon.png" v-else />
        </template>
      </van-tabbar-item>

      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <img
            src="@/assets/img/company/nav-icon/my-icon-hover.png"
            v-if="props.active"
          />
          <img src="@/assets/img/company/nav-icon/my-icon.png" v-else />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem, Toast } from "vant";
import ResumePage from "./resume/ResumeMain.vue";
import JobsPage from "./job/JobIndex.vue";
import SearchPage from "./searchResume/Index.vue";
import NotePage from "./im/Index";
import MyPage from "./my/MyIndex.vue";
import Global from '@/Global';
import { checkCompanyLogin } from '@/util/session';
export default {
  name: "MainPage",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    ResumePage,
    JobsPage,
    SearchPage,
    NotePage,
    MyPage,
  },
  mounted() {
    //计算页面上下滚动的高度，用于切换tab后自动回顶
    window.addEventListener("scroll", this.handlScroll);
		this.getIMNoRead();
		this.$bus.$on(Global.bus_person_im_sendmessage,()=>{
			this.getIMNoRead();
		});
		this.$bus.$on(Global.bus_company_im_message_read,()=>{
    	this.getIMNoRead();
    });
		this.$bus.$on(Global.bus_company_im_message_receive_OutPage,()=>{
    	this.getIMNoRead();
    });
  },
  // 定义属性
  data() {
    return {
      active: 0,
      scroll: [0, 0],
			im_badge:0,
    };
  },
  // 方法集合
  methods: {
    handlScroll() {
      let scroll = document.documentElement.scrollTop || document.body.scrollTop;
      this.scroll[this.active] = scroll;
    },
    onChange(index) {
      this.active = index;
    },
		//获取是否有未读聊天
    getIMNoRead() {
      if (!checkCompanyLogin()) return;
      this.$api.get('/CompanyIM/GetUnreadCount').then(res => {
        if (res.success) {
          this.im_badge = res.response;
        }
      })
    },
  },
  watch: {
    active(val) {
      this.$nextTick(() => {
        document.body.scrollTop = this.scroll[val];
        document.documentElement.scrollTop = this.scroll[val];
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>